import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import { View, Text, ScrollView, Alert } from 'react-native'
import BlurImg from 'src/components/blur-img'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import styles from '../css/HomepageHeaderCss'
import { companyBgColoList, companyDefaultLogo } from 'src/utils/ConfigUtil'
import LinearGradient from 'react-native-linear-gradient'
const tabs = [{ value: '公司简介', index: 0 }, { value: '在招职位', index: 1 }]
export default class HomepageHeader extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    companyClick: PropTypes.func,
    tabComponent: PropTypes.func,
    companyId: PropTypes.number,
    initialPage: PropTypes.number
  }

  render () {
    const { data = {}, tabComponent, initialPage, famousDisplay, jumpBCompanyNameSample } = this.props
    const list = [data.companyFinance, data.companyPerson, data.companyAbout]
    const currenTabs = famousDisplay ? [...tabs].reverse() : tabs
    return (
      <BlurImg
        style={styles.container}
        blurAmount={0}
        source={require('src/imgC/company/company-bg.png')}
      >
        <LinearGradient colors={['rgba(0,0,0,0.2)', 'rgba(0,0,0,0.5)', 'rgba(0,0,0,0.9)']} style={styles.bgColor}>
        </LinearGradient>
        <View style={styles.wrap}>
          <View style={styles.nameWrap}>
            <View style={styles.simpleNameWrap}>
              <Text style={styles.simpleName}>{data.simpleName || '请填写简称'}</Text>
              {!!data.famousId &&
                <LinearGradient
                  colors={['#FF9310', '#FFDC25']}
                  style={styles.famousWrap}>
                  <Text style={styles.famousText}>名企</Text>
                </LinearGradient>}
            </View>
            <Text style={styles.name}>{data.companyName}</Text>
          </View>
          <View style={styles.imgShadow}>
            <CustomImage
              style={styles.logo}
              source={data.companyLogo ? { uri: data.companyLogo } : companyDefaultLogo}
            />
          </View>
        </View>
        <View>
          <View
            style={styles.companyInformation}
          >
            {(list || []).map((list, index) => {
              return (
                <View key={index} style={styles.tagPaperView}>
                  <Text style={styles.tagPaper} key={index}>
                    {' '}
                    {list}
                  </Text>
                </View>
              )
            })}
          </View>
        </View>
        <View style={styles.tabView}>
          {
            currenTabs.map((e, i) => (
              <Fragment key={e.value}>
                <CustomButton
                  onPress={tabComponent}
                  params={{ type: e.index }}
                  style={initialPage === e.index ? styles.tabViewYes : styles.tabViewNo}
                >
                  <Text
                    style={
                      initialPage === e.index ? styles.tabViewYesName : styles.tabViewNoName
                    }
                  >
                    {e.value}
                  </Text>
                  <View style={initialPage === e.index ? styles.tabViewYesIcin : styles.tabViewNoIcon}></View>
                </CustomButton>
                <View style={styles.View} />
              </Fragment>
            ))
          }
        </View>
      </BlurImg>
    )
  }
}
